DAY9:深入了解 React 狀態管理

在React開發中，狀態（State）管理是一個至關重要的議題。透過狀態管理，我們可以在應用程序中保持數據的同步，並根據用戶的互動來實現動態的界面。

使用 useState Hook

React提供了一個名為useState的Hook，它使得在函數型組件中使用狀態變得非常容易。以下是一個簡單的例子：

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className='countContainer'>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)} className='add'>增加</button>
    </div>
  );
}

export default App;

useState的話我當時去外面面試就有考到怎麼把useState變成function的方法呢~
閉包就是其中一個方法如下面這個程式碼

const [count, setCount] = useState(0);

  const handleIncrement = () => {
    // 使用閉包確保能夠獲取到最新的 count 值
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div className='countContainer'>
      <p>Count: {count}</p>
      <button onClick={handleIncrement} className='add'>
        增加
      </button>
    </div>
  );

總結

React中的狀態管理是構建動態和交互性應用程序的核心。透過useState Hook，我們可以在函數型組件中輕鬆管理狀態。此外，閉包技巧有助於確保狀態更新的穩定性。

總之，深入了解React的狀態管理是提高React開發技能的關鍵一步。希望這篇文章能幫助您更好地理解React中的狀態管理。